var template = `
<div class="proxy">
    <h3>代理管理</h3>
    <button @click="doAdd" v-if="!isEdit">新增</button>
    <button @click="doCancel" v-if="isEdit">取消</button>
    <button @click="doRefresh">刷新</button>
    
    <Form :data="editModel" :showModel="formShowModel" :schema="schema" v-if="isEdit" @cancel="doCancel" @submit="doSubmit"></Form>
    <List :list="list" :showModel="listShowModel" :schema="schema">
        <template v-slot="{item}">
            <button @click="doEdit(item)">修改</button>
            <button @click="doDelete(item)">删除</button>
        </template>
    </List>
</div>
`;


let ProxyCom = {
    name: 'ProxyCom',
    data() {
        return {
            list: [],
            isEdit: false,
            schema: '代理配置',
            model: {
                proxyName: '代理-' + new Date().fmt('yyyy年MM月dd日-HH-mm-ss'),
                url: '',
                ip: '',
                port: 0,
                password: '',
                method: '',
                enabled: true,
            },
            listShowModel: {
                proxyName: '代理-' + new Date().fmt('yyyy年MM月dd日-HH-mm-ss'),
                url: {
                    type: 'text',
                    maxLength: 15,
                },
                ip: '',
                port: 0,
                password: '',
                method: '',
                enabled: {
                    success: true,
                },
                available: {
                    success: true,
                },
                updatedTime: {
                    type: 'date',
                    formatter: 'yyyy-MM-dd HH:mm:ss'
                },
            },
            formShowModel: {
                proxyName: '代理-' + new Date().fmt('yyyy年MM月dd日-HH-mm-ss'),
                url: '',
                ip: '',
                port: 0,
                password: '',
                method: '',
                enabled: {
                    type: 'boolean',
                },
            },
            editModel: {}
        }
    },
    components: {List, Form},
    template,
    mounted: () => {
        console.log('proxy mounted');
        const {proxy} = Vue.getCurrentInstance();
        proxy.doGetAll();
    },
    methods: {
        doRefresh() {
            this.$api.proxy.getAll().then(res => {
                if (res.data && res.data.code === 0) {
                    this.list = res.data.data;
                    let msg = '刷新成功';
                    this.$message({message: msg});
                } else {
                    let msg = '接口调用失败';
                    console.error(msg, res);
                    this.$message({message: msg, level: 'error'});
                }
            }).catch(e => {
                let msg = '接口调用失败!';
                console.error(msg, e);
                this.$message({message: msg, level: 'error'});
            })
        },
        doGetAll() {
            this.$api.proxy.getAll().then(res => {
                if (res.data && res.data.code === 0) {
                    this.list = res.data.data;
                } else {
                    let msg = '接口调用失败';
                    console.error(msg, res);
                    this.$message({message: msg, level: 'error'});
                }
            }).catch(e => {
                let msg = '接口调用失败!';
                console.error(msg, e);
                this.$message({message: msg, level: 'error'});
            })
        },
        doAdd() {
            this.editModel = deepClone(this.model);
            this.isEdit = true;
        },
        doEdit(item) {
            this.editModel = deepClone(item);
            this.isEdit = true;
        },
        doDelete(item) {
            this.$api.proxy.delete(item).then(res => {
                if (res.data && res.data.code === 0) {
                    let msg = '删除成功!';
                    console.log(msg, res.data);
                    this.$message({message: msg});
                    this.isEdit = false;
                    this.doGetAll()
                } else {
                    let msg = '删除失败!';
                    console.error(msg, res.data);
                    this.$message({message: msg, level: 'error'});
                }
            }).catch(e => {
                let msg = '删除失败!';
                console.error(msg, e);
                this.$message({message: msg, level: 'error'});
            })
        },
        doSubmit() {
            this.$api.proxy.update(this.editModel).then(res => {
                if (res.data && res.data.code === 0) {
                    let msg = '保存成功!';
                    console.log(msg, res.data);
                    this.$message({message: msg});
                    this.isEdit = false;
                    this.doGetAll()
                } else {
                    let msg = '保存失败!';
                    console.error(msg, res.data);
                    this.$message({message: msg, level: 'error'});
                }
            }).catch(e => {
                let msg = '保存失败!';
                console.error(msg, e);
                this.$message({message: msg, level: 'error'});
            })
        },
        doCancel() {
            this.isEdit = false;
        },
        doStart() {
            alert('start')
        }
    }
};